<template>
  <v-layout wrap>
    <v-flex xs12 sm8 md8 class="pa-1">
      <v-card>
        <v-toolbar color="warning" dark>
          <v-checkbox class="pt-4" label="全选" v-model="selectAll" @click.native="toggleAll"></v-checkbox>
          <v-toolbar-title>今日发布列表</v-toolbar-title>
          <v-spacer></v-spacer>
        </v-toolbar>
        <v-list>
          <v-list-group style="border-bottom:1px solid rgba(0,0,0,0.12);" v-for="pub in publish" :key="pub.id" no-action>
            <v-list-tile slot="activator">
              <v-list-tile-action>
              <v-checkbox v-if=" pub.status==0" v-model="selected" :value="pub.id"></v-checkbox>
            </v-list-tile-action>
              <v-list-tile-content>
                <v-list-tile-title>
                  {{pub.prj_name}}/{{pub.prj_name_en}}
                </v-list-tile-title>
                <v-list-tile-sub-title>{{pub.status_text}}/{{pub.endTime}}</v-list-tile-sub-title>
              </v-list-tile-content>
            </v-list-tile>
            <v-list-tile v-for="host in pub.hosts" :key="host.host_id">
              <v-list-tile-content>
                <v-list-tile-title>{{ host.host__hostname }}</v-list-tile-title>
              </v-list-tile-content>
              <v-list-tile-action>
                <v-icon class="pr-4" v-if="!host.pub_status">flight_takeoff</v-icon>
                <v-icon class="pr-4" v-if="host.pub_status">flight</v-icon>
              </v-list-tile-action>
            </v-list-tile>
          </v-list-group>
        </v-list>
        <v-card-actions>
          <v-icon>flight_takeoff</v-icon>:正在发布
          <v-icon class="pl-3">flight</v-icon>:发布成功
          <v-spacer></v-spacer>
          <v-btn color="warning" @click.native="mutiPubDialog=true" small><h4>确认批量发布</h4></v-btn>
        </v-card-actions>
      </v-card>
    </v-flex>
    <v-flex xs12 sm4 md4 class="pa-1">
      <v-card>
        <v-toolbar color="success" dark>
          <v-toolbar-title>今日发布进度</v-toolbar-title>
        </v-toolbar>
        <div class="text-xs-center pa-4">
          <v-progress-circular :rotate="360" :size="200" :width="35" :value="value" color="teal">
            {{ value }}%
          </v-progress-circular>
        </div>
      </v-card>
    </v-flex>
    <verify :vcodeDialog = "mutiPubDialog" @upVerify="verifyResult"
            :verifyTitle="mutiPubTitle" @clsVerify="closeVerifyDialog"></verify>
  </v-layout>
</template>

<script>
import { createNamespacedHelpers } from 'vuex'
const { mapActions } = createNamespacedHelpers('todayPublish')
export default {
  data: function () {
    return this.$store.state.todayPublish
  },
  methods: {
    ...mapActions([
      'toggleAll',
      'loadPublishList',
      'doMutiPublish'
    ]),
    verifyResult () {
      this.doMutiPublish()
    },
    closeVerifyDialog () {
      this.mutiPubDialog = false
    }
  },
  activated () {
    this.publish = []
    this.selectAll = false
    this.selected = []
    this.interval = setInterval(() => {
      this.loadPublishList()
    }, 3000)
  },
  deactivated () {
    clearInterval(this.interval)
  },
  components: {
    verify: () => import('../../components/verify/verify')
  }
}
</script>
